require(['config'],()=>{
    require(['jquery','pAjax','header','footer','floater'],()=>{
        class Details{
            constructor(){
                this.id=location.search.slice(4)
                this.loupe=document.querySelector('#loupe')
                this.introduce=document.querySelector('#introduce')
                this.init()
            }
            init(){
                this.request()
            }
            //请求数据
            request() {
                pAjax({
                        url: '/api/goods.json'
                    })
                    .then(data => {
                        let res = JSON.parse(data)
                        this.render(res)
                    })
            }
            //渲染
            render(res){
                let goods=res.find(item=>{return item.goods_id==this.id})
                this.loupe.innerHTML=`
                    <div class="smallImg"><img src="${goods.img_small_logo}"><span class="mask"></span></div>
                    <div class="bigImg"><img src="${goods.img_big_logo}"></div>
                    <div class="option">
                        <h1>${goods.title}</h1>
                        <h2>¥ ${goods.price}</h2>
                        <p class="pTop">尺码：</p>
                        <p>数量:
                            <button class="sub" data-id="${goods.goods_id}">-</button>
                            <input type="text" class="goodsNum" value="1" data-id="${goods.goods_id}">
                            <button class="add" data-id="${goods.goods_id}">+</button>
                        </p>
                        <p>领取优惠券</p>
                        <input type="submit" value="加入购物车" class="goCart">
                        <input type="submit" value="立即购买" disabled>
                    </div>
                `
                this.introduce.innerHTML=`
                    ${goods.goods_introduce}
                `
                //+按钮事件
                let add=document.querySelector('.add')
                let input=document.querySelector('.goodsNum')
                let num=Number(input.value)
                add.onclick=()=>{
                    num+=1
                    if(num>goods.goods_number){
                        num=goods.goods_number
                        alert('库存不足')
                    }
                    input.value=num
                }
                let sub=document.querySelector('.sub')
                sub.onclick=()=>{
                    num=num-1
                    if(num<1){
                        num=1
                    }
                    input.value=num
                }
                //加入购物车
                let goCart=document.querySelector('.goCart')
                goCart.onclick=()=>{
                    let user=JSON.parse(localStorage.getItem('username'))
                    if(user){
                        let list = JSON.parse(localStorage.getItem('cart')) || []
                        if(!list.length){
                            list.push(goods)
                            goods.cart_number = Number(input.value)
                        }else{
                            let data = list.some(item=>{return item.goods_id == this.id})
                            if(data){
                                let index = list.findIndex(item=>{return item.goods_id == this.id})
                                list[index].cart_number+=Number(input.value)
                            }else{
                                list.push(goods)
                                goods.cart_number = Number(input.value)
                            }
                        }
                        alert('加入购物车成功')
                        localStorage.setItem('cart', JSON.stringify(list))
                        let data = JSON.parse(localStorage.getItem('cart')) || []
                        let num = 0
                        data.forEach(item=>{
                            num += item.cart_number
                        })
                        $('.numHeader')[0].innerHTML= '&nbsp;'+num
                    }else{
                        if(confirm('请先登录')){
                            location.href='/html/login.html'
                        }else{
                            return false
                        }
                    }
                }
                this.magnifier()
            }
            //放大镜
            magnifier(){
                let mask=document.querySelector('.mask')
                let smallImg = document.querySelector('.smallImg')
                let bigImg = document.querySelector('.bigImg')
                let img = document.querySelector('.bigImg img')
                //当鼠标移入smallBox的时候让mask和bigBox显示
                smallImg.onmouseover = () =>{
                    mask.style.display = 'block'
                    bigImg.style.display = 'block'
                }
                //当鼠标移出smallBox的时候让mask和bigBox隐藏
                smallImg.onmouseout = () =>{
                    mask.style.display = 'none'
                    bigImg.style.display = 'none'
                }
                //当鼠标在smallBox上移动的时候，bigBox里的img也随之移动
                smallImg.onmousemove = (e) =>{
                    //获取鼠标坐标
                    let x = e.pageX - smallImg.offsetParent.offsetLeft - mask.offsetWidth / 2
                    let y = e.pageY - smallImg.offsetParent.offsetTop - mask.offsetHeight / 2
                    //判断，限定范围
                    if (x <= 0) {
                        x = 0
                    } else if (x >= smallImg.offsetWidth - mask.offsetWidth) {
                        x = smallImg.offsetWidth - mask.offsetWidth
                    }
                    if (y <= 0) {
                        y = 0
                    } else if (y >= smallImg.offsetHeight - mask.offsetHeight) {
                        y = smallImg.offsetHeight - mask.offsetHeight
                    }
                    //让mask跟着鼠标移动，且鼠标一直在mask中心
                    mask.style.left = x + 'px'
                    mask.style.top = y + 'px'
                    //计算比例
                    let numL = x / (smallImg.offsetWidth - mask.offsetWidth)
                    let numT = y / (smallImg.offsetHeight - mask.offsetHeight)
                    //让大图等比例移动
                    img.style.left = -(img.offsetWidth - bigImg.offsetWidth) * numL + 'px'
                    img.style.top = -(img.offsetHeight - bigImg.offsetHeight) * numT + 'px'
                }
            }
        }
        new Details()
    })
})